<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<div id="dangdang">
    <div id="logo">
        <div id="logo_left" ><a href="#"><img src="img/logo.jpg" width="158" height="75"></a></div>
         <!-- 3折疯抢 -->
         <div><img src="img/icon_count.png" id="sanzhe"></div>
            <div id="logo_right">
                <table width="100%" border="0">
                    <tr>
                        <td height="30" align="center">尾品会</td>
                        <td align="center">当当优品</td>
                        <td align="center">数字馆</td>
                        <td align="center">都看阅读</td>
                    </tr>
                </table>
             </div>
    </div>

<div id="daohang" >
    <table width="100%" border="0">
  <tr>
    <td width="6%" height="34" align="center" valign="middle"><a href="#" class="white">首页</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">图书</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">音像</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">童装</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">服装</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">鞋靴</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">运动</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">箱包</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">美妆</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">珠宝</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">家居</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">食品</a></td>
    <td width="5%" align="center" valign="middle"><a href="#" class="white">酒</a></td>
    <td width="5%" align="center" valign="middle"><a href="#" class="white">手机</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">数码</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">电脑</a></td>
    <td width="6%" align="center" valign="middle"><a href="#" class="white">家电</a></td>
  </tr>
    </table>
</div>

<div id="toutu"><img src="img/banner.png"  ></div>

    
<div class="zhuti">
         <table width="100%"  cellspacing="0" height="400">
             <img class="bg" src="img/bg_bang.gif"  >

               <img class="b1" src="img/book-01.jpg"  >
               <img class="No1" src="img/bookNo1.gif" >

               <img class="b2" src="img/book-02.jpg"  >
               <img class="No2" src="img/bookNo2.gif" >  

               <img class="b3" src="img/book-03.jpg"  >
               <img class="No3" src="img/bookNo3.gif" > 
           
            
                    <span class="w1">偷影子的人
                        <p id="word"> 作者：马克</p>
                        <p id="word">出版社：湖南出版社</p>
                        <p id="word">当当价：<y id="price">¥ 17.90</y> </p> 
                        <p id="word"> 不知道姓氏的.....</p>
                    </span>
                    <span class="w2">看见
                            <p id="word2"> 作者：柴静</p>
                            <p id="word2">出版社：湖南出版社</p>
                            <p id="word2">当当价： <y id="price" >¥ 29.40</y>  </p>
                    </span>
                    <span class="w3">改变孩子先改变自己
                                <p id="word3"> 作者：嘉懿</p>
                                <p id="word3">出版社：湖南出版社</p>
                                <p id="word3">当当价： <y id="price">¥ 22.20</y>   </p>
                    </span>
        </table>
</div>


    <div id="down"><table width="100%" border="0">
    <tr>
        <td align="center">Copyright (©) 当当网&nbsp; 2004-2013，ALL Rights Reserved <img src="img/validate.gif" width="40" height="48" alt=""/> 京ICP证041189号 出版物经营许可证&nbsp; 新出发京批字第直0673号</td>
    </tr>
</table>
    </div>
</div>
</body>
</html>


<style type="text/css">
 #dangdang {
	position: absolute;
	width: 100%;
	height: 1216px;
	z-index: 1;
	left: 0px;
	top: 0px;
}
#dangdang #logo {
	height: 85px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
}
#dangdang #logo #logo_right {  
    /* 右上部分导航栏 */
	float: right;
    position: relative;
	height: 33px;
	width: 253px;
	margin-top: 50px;
	background-color: #eafffa;
	border: 1px solid #bfebe0;
	font-family: "微软雅黑";
	font-size: 12px;
	color: #666;
} 

    #sanzhe {
        /* 顶部3折疯抢样式 */
        position: absolute;
        right: 690px;
        top: 50px;
        z-index: 4;
      
    }

#dangdang #daohang {
  
	height: 37px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 2px;
	font-size: 13px;
	color: #FFF;
	background-image: url(img/menuBg.jpg);
}

#dangdang #logo #logo_left {
	float: left;
	height: 75px;
	width: 158px;
}


#dangdang #toutu {
	height: 130px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
}

.zhuti {
        position: relative;
        border:2px solid greenyellow;
        margin-left: auto;
        margin-right: auto;
        margin-top: 12px;
        width: 50%;
    }

.bg{
    position: absolute;
    margin-top: 30px;
    margin-left: -10px;
}

.b1{
    position: absolute;
    margin-top: 114px;
    margin-left: 5px;
}

.No1{
    position: absolute;
    margin-top: 110px;
    margin-left: 21px;
}

.b2{
    position: absolute;
    margin-top: 114px;
    margin-left: 550px;
}

.No2{
    position: absolute;
    margin-top: 110px;
    margin-left: 550px;
}

.b3{
    position: absolute;
    margin-top: 244px;
    margin-left: 550px;
}

.No3{
    position: absolute;
    margin-top: 240px;
    margin-left: 550px;
}

.w1{
    position: absolute;
    margin-top: 140px;
    margin-left: 260px;
    color: rgb(0, 68, 255)
}

#word{
    color: #000000;
    font-size: 80%
}

.w2{
    position: absolute;
    margin-top: 120px;
    margin-left: 660px;
    color: rgb(0, 68, 255)
}

#word2{
    color: #000000;
    font-size: 80%
}

.w3{
    position: absolute;
    margin-top: 245px;
    margin-left: 660px;
    color: rgb(0, 68, 255)
}

#word3{
    color: #000000;
    font-size: 80%
}

#price{
    color: red
    
}


    #dangdang #down {
        height: 60px;
        width: 960px;
        margin-top: 5px;
        margin-right: auto;
        margin-left: auto;
        color: #BFBFBF;
        font-family: "微软雅黑";
        font-size: 13px;
    }
    a.white:link {
        color: #FFF;
        text-decoration: none;
    }
    a.white:visited {
        text-decoration: none;
        color: #FFF;
    }
    a.white:hover {
        text-decoration: none;
        color: #000000;
    }
    a.white:active {
        text-decoration: none;
    }
   
    
    </style>

</html>



